<#include "/common/_header.html" />
<div class="page-group"><!-- 页面组 -->
	<div class="page page-current" id="routers-step1" style="background:#fff"><!-- 页面组中的每一个页面，可以互相跳转 -->
		<div class="content native-scroll"><!-- 每个页面的内容区域 -->
			<div class="content-block">
				<h2 style="text-align:center;margin-top: -1rem;margin-bottom: -1rem;">
					<span style="color:#f48450">1/2</span>
					<br>
					<span style="color:#000">定位您的小区</span>
				</h2>
			</div>
			<div class="content-block">
				<div id="l-map" style="display:none;"></div>
				<div class="list-block">
					<ul id="r-result" style="background-color: rgba(255, 255, 255, 0);"></ul>
				</div>
			</div>
			<div class="content-block" style="margin-top: -1rem;">
			 	<p class="pull-right"><a href="#" onclick="gethelp()">找不到您的小区？</a></p>
			</div>			
		</div>
	</div>
	<div class="page" id="routers-step2" style="background:#fff">
		<div class="content native-scroll"><!-- 每个页面的内容区域 -->
			<div class="content-block" style="text-align:center;margin:0.75rem 0;">
				<h2>
					<span style="color:#f48450">2/2</span>
					<br>
					<span style="color:#000">选择您的家乡，加入同乡汇</span>
				</h2>
			</div>
			<div class="content-block" style="margin:0.75rem 0;">
				<h2 style="color:#f48450">
					<input placeholder="请点击选择您的家乡" style='border: 0px solid #fff;text-decoration:underline;text-align:center;background-color: rgba(255, 255, 255, 0);' 
						type="text" id='city-picker' value="" onchange="setHometown(this)"/>
					</h2>
			</div>
			<div>
				<img style="width:100%;height:100%" src="${path}/resource/images/townee.png">
			</div>
			<div class="content-block" style="text-align:center;margin:0.5rem 0;">
				<h2 class="pull-left" style="margin:0 0;">
					<a class="item-link list-button" style="color:#000" href="#routers-step1">
				         上一步
				    <span style="color:#f48450">
				    	<span class="iconfont icon-back"></span><span class="iconfont icon-back"></span><span class="iconfont icon-back"></span>
				    </span>
				 	</a>
			 	</h2>
				<h2 class="pull-right" style="margin:0 0;">
					<a class="item-link list-button" style="color:#000" href="#" onclick="saveNewuser()">
					<span style="color:#f48450">
						<span class="iconfont icon-right"></span><span class="iconfont icon-right"></span><span class="iconfont icon-right"></span>
				    </span>     
				         完成
				 	</a>
			 	</h2>			
			</div>
		</div>
	</div>
	<form id="newuserForm" action="${path}/newuser/saveNewuser" method="post" style="display:hidden;">
		<input type="hidden" name="commName">
		<input type="hidden" name="commAddress">
		<input type="hidden" name="lng">
		<input type="hidden" name="lat">
		<input type="hidden" name="homeTown">
	</form>
</div>
<#include "/common/_footer.html" />
<script type="text/javascript" src="//g.alicdn.com/msui/sm/0.6.2/js/sm-city-picker.min.js" charset="utf-8"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=${baiduAK}"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
$.showPreloader('定位中，请稍后...');
wx.config({
    debug: false,
    appId: '${appId}',
    timestamp: ${timestamp},
    nonceStr: '${noncestr}',
    signature: '${signature}',
    jsApiList: [
      'checkJsApi',
      'openLocation',
      'getLocation',
      'closeWindow'
    ]
});
wx.ready(function(){
	wx.checkJsApi({
           jsApiList: [
			'checkJsApi',
			'openLocation',
			'getLocation',
			'closeWindow'
           ],
           success: function (res) {
           }
       });
	wx.getLocation({
	    type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
	    success: function (res) {
	        var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
	        var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
	        var speed = res.speed; // 速度，以米/每秒计
	        var accuracy = res.accuracy; // 位置精度
	    	$.ajax({
	    		type:'post',
	    		url:'${path}/checkin/toBaiduMap',
	    		data:{"longitude":longitude,"latitude":latitude},
	    		success:function(data){
	    			var dataJson = JSON.parse(data);
	    			var lng = dataJson.result[0].x;
	    			var lat = dataJson.result[1].y;
	    			// 百度地图API功能
			    	var map = new BMap.Map("l-map");            // 创建Map实例
			    	map.centerAndZoom(new BMap.Point(lng,lat), 11);
			    	var options = {
			    			onSearchComplete: function(results){
			    				// 判断状态是否正确
			    				if (local.getStatus() == BMAP_STATUS_SUCCESS){
			    					var s = [];
			    					for (var i = 0; i < results.getCurrentNumPois(); i ++){
			    						s.push("<li style='border-bottom-style:groove'><a href='#routers-step2' class='item-link item-content'><div class='item-inner'><div class='item-title' style='color:#000'>"+results.getPoi(i).title + ", " + results.getPoi(i).address+"</div></div></a></li>");
			    					}
			    					document.getElementById("r-result").innerHTML = s.join("");
			    					$.hidePreloader();
			    					$("#r-result>li>a").click(function(){
			    						$("#r-result>li>a").each(function(){
			    							$(this).removeAttr("style");
			    						});
			    						$(this).css("background-color","#F9F589");
			    						var dist = $(".item-inner .item-title", $(this)).text();
			    						var dists = dist.split(", ");
			    						//$.alert(dists[0],"你选择的小区是：");
			    						$("input[name='commName']").val(dists[0]);
			    						$("input[name='commAddress']").val(dists[1]);
			    						$("input[name='lng']").val(lng);
			    						$("input[name='lat']").val(lat);
			    					});
			    				}
			    			}
			    		};
			    	var local = new BMap.LocalSearch(map, options);
			    	local.searchNearby("小区",new BMap.Point(lng,lat),300);
	    		},
	    		error:function(xhr,errorType , error) {
	    			console.log("sorry error\r\n");
	    		}
	    	});
	    }
	});
});
$("#city-picker").cityPicker({
    toolbarTemplate: '<header class="bar bar-nav">'+
    '<button class="button button-link pull-right close-picker">确定</button>'+
    '<h1 class="title">请选择您的家乡</h1></header>'
});
function gethelp(){
	$.alert("请确保您的手机已开启定位，并且您的地理位置是在您家里。如果不在，请回家后再重新定位。");
}
function saveNewuser(){
	if($("input[name='commName']").val().trim()==''){
		$.alert("点击确定返回修改","您还没有选择您的小区哦。", function () {
			$.router.load("#routers-step1");
        });
		return false;
	}else if($("input[name='homeTown']").val().trim()==''){
		$.alert("点击确定返回修改","您还没有选择您的家乡哦。");
		return false;
	}
	$("#newuserForm").submit();
}
function setHometown(obj){
	$("input[name='homeTown']").val($(obj).val());
}
</script>